<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="统计月份">
			<el-col :span="11">
			<el-date-picker type="month" value-format="yyyy-MM" placeholder="选择月份" v-model="search_date" style="width: 150px;"></el-date-picker>
			</el-col>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="warning" @click="clear()">清空</el-button>
		<el-button type="success" @click="isAdd()" style="float: right; margin-right: 40px;">添加</el-button>
		<!-- 表格分页 -->
		<el-table :data="tableData" border fit style="width: 100%">
			<el-table-column fixed  type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
			</el-table-column>
		    <el-table-column prop="date" label="统计月份"></el-table-column>
		    <el-table-column prop="totalPrice" label="月初账户余额"></el-table-column>
		    <el-table-column prop="outPrice" label="月支出总额"></el-table-column>
			<el-table-column prop="inPrice" label="月收入总额"></el-table-column>
			<el-table-column prop="price" label="月盈利总额"></el-table-column>
			<el-table-column prop="finalPrice" label="月末账户余额"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
		        <el-button @click="edit(scope.row)" type="text" size="small" icon="el-icon-edit" circle>编辑</el-button>
		        <el-button @click="isDel(scope.row)" type="text" size="small" icon="el-icon-delete" circle>删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<div>
			<el-pagination background layout="prev, pager, next" :total="pages" :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>
		<!-- 弹出层 -->
		<el-dialog :title="titleMsg" :visible.sync="dialogFormVisible" width="400px">
			<el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
				<el-form-item label="统计月份">
					<el-col :span="11">
						<el-form-item prop="date">
							<el-date-picker type="month" value-format="yyyy-MM" placeholder="选择月份" v-model="form.date" style="width: 200px;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="月初账户余额" prop="totalPrice">
					<el-input v-model="form.totalPrice"></el-input>
				</el-form-item>
				<el-form-item label="月支出总额" prop="outPrice">
					<el-input v-model="form.outPrice"></el-input>
				</el-form-item>
				<el-form-item label="月收入总额" prop="inPrice">
					<el-input v-model="form.inPrice"></el-input>
				</el-form-item>
				<el-form-item label="月盈利总额" prop="price">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
				<el-form-item label="月末账户余额" prop="finalPrice">
					<el-input v-model="form.finalPrice"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">{{buttonMsg}}</el-button>
					<el-button @click="cancleForm()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"OperateCount",
		data(){
			return{
				search_date:"",
				pageNum:1,
				pageSize:3,
				pages:1,
				titleMsg:"",
				buttonMsg:"",
				tableData: [],
				form: {},
				ruleForm: {
					date: '',
					totalPrice: '',
					outPrice: '',
					inPrice: '',
					price: '',
					finalPrice:'',
				},
				rules: {
					date: 
						[
							{ required: true, message: '请选择统计月份', trigger: 'change' }
						],
					totalPrice: 
						[
							{ required: true, message: '请输入月初账户金额', trigger: 'blur' }
						],
					outPrice: 
						[
							{ required: true, message: '请输入月支出金额', trigger: 'blur' }
						],
					inPrice: 
						[
							{ required: true, message: '请输入月收入金额', trigger: 'blur' }
						],
					price: 
						[
							{ required: true, message: '请输入月盈利金额', trigger: 'blur' }
						],
					finalPrice: 
						[
							{ required: true, message: '请输入月末账户金额', trigger: 'blur' }
						],
				},
				formLabelWidth: '120px',
				dialogFormVisible: false,
			}
		},
		methods:{
			search(){
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize,
					date : this.search_date,
				};
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/finance/getMechanismConsumePageInfo",data).then((response)=>{
					that.tableData = response.data.list;
					for(let i = 0;i < that.tableData.length;i++){
						that.tableData[i].totalPrice = that.tableData[i].totalPrice.toFixed(2);
						that.tableData[i].outPrice = that.tableData[i].outPrice.toFixed(2);
						that.tableData[i].inPrice = that.tableData[i].inPrice.toFixed(2);
						that.$set(that.tableData[i],'price',(parseFloat(that.tableData[i].inPrice)-parseFloat(that.tableData[i].outPrice)).toFixed(2));
						that.$set(that.tableData[i],'finalPrice',(parseFloat(that.tableData[i].totalPrice)+parseFloat(that.tableData[i].price)).toFixed(2));
					}
					that.pages = parseInt(response.data.pages)*10;
				}).catch((response)=>{
					console.log(response);
				})
			},
			clear(){												//清空查询条件
				this.search_date = "";
			},
			changePageNum(currentPage){								//改变页数
				this.pageNum = currentPage;
				this.search();
			},
			isAdd(){												//添加按钮触发事件
				this.buttonMsg = '添加';
				this.titleMsg = '添加机构运营统计记录';
				this.form = {};
				this.dialogFormVisible = true;
			},
			edit(row) {
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/finance/getMechanismConsumeById?id="+row.id).then((response)=>{
					that.form = response.data;
					that.form.price = (parseFloat(that.form.inPrice)-parseFloat(that.form.outPrice)).toFixed(2);
					that.form.finalPrice = (parseFloat(that.form.totalPrice)+parseFloat(that.form.price)).toFixed(2);
				}).catch((response)=>{
					console.log(response);
				});
				this.buttonMsg = '修改';
				this.titleMsg = '编辑机构运营统计记录';
				this.isShowBack=true;
				this.dialogFormVisible = true;
			},
			submitForm(formName) {									//添加（编辑）表单数据提交
				let that = this;
				let msg = '';
				this.$refs[formName].validate((valid) => {
				if (valid) {
					if(this.buttonMsg == '添加')
					{
						this.$axios.post(that.$global.zuulIp+"/finance/addMechanismConsume",that.form).then((response)=>{
							if(response.data>0){
								msg = '添加成功!';
							}else{
								msg = '添加失败!';
							}
							that.$alert(msg,{
								confirmButtonText: '确定'
							}).then(()=>{
								that.search();
								that.dialogFormVisible = false;
							})
						}).catch((response)=>{
							console.log(response);
						});
					}else if(this.buttonMsg == '修改'){
						this.$axios.post(that.$global.zuulIp+"/finance/modMechanismConsume",that.form).then((response)=>{
							console.log(that.formData.backDayDate);
							if(response.data>0){
								msg = '修改成功!';
							}else{
								msg = '修改失败!';
							}
							that.$alert(msg,{
								confirmButtonText: '确定'
							}).then(()=>{
								that.search();
								that.dialogFormVisible = false;
							})
						}).catch((response)=>{
							console.log(response);
						});
					}
				} else {
					console.log('error submit!!');
					return false;
				}
				});
      		},
			cancleForm(){
				this.dialogFormVisible = false;
			},
			isDel(row){												//删除职工请假信息
				let that = this;
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						that.$axios.get(that.$global.zuulIp+"/finance/delMechanismConsume?id="+row.id).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
							that.search();
						}).catch((response)=>{
							console.log(response);
						})
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
		},
		mounted:function(){
			this.search();
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }
</style>
